<template>
    <div class="goods-tabs">
      <nav>
        <a :class="{ active: this.activeName === 'detail' }" href="javascript:;" @click="clickTab('detail')">商品详情</a>
        <!-- {{infoobj.id}} -->
        <a :class="{ active: this.activeName === 'comment' }" href="javascript:;" @click="clickTab('comment')">商品评价<span>{{ infoobj.id }}</span></a>
      </nav>
      <!-- 切换内容的地方 -->
      <component :is="'goods-'+activeName" :infoobj="infoobj"/>
    </div>
  </template>
  
  <script>
  import GoodsDetail from './GoodsDetail.vue'
  import GoodsComment from './GoodsComent.vue'
  export default {
    components: { GoodsDetail, GoodsComment },
    props:['infoobj'],
    data() {
      return {
        activeName: 'detail'
      }
    },
    methods: {
      // let a1 = this.$refs.a1
      clickTab(test) {
        // console.log(name);
        //   console.log(this.activeName = name);
        this.activeName = test
      }
    },
  }
  </script>
   
  <style lang="scss" scoped>
  @import "@/assets/css/variables.scss";
  .goods-tabs {
    min-height: 600px;
    background: #fff;
    nav {
      height: 70px;
      line-height: 70px;
      display: flex;
      border-bottom: 1px solid #f5f5f5;
      a {
        padding: 0 40px;
        font-size: 18px;
        position: relative;
        > span {
          color: $priceColor;
          font-size: 16px;
          margin-left: 10px;
        }
        &:first-child {
          border-right: 1px solid #f5f5f5;
        }
        &.active {
          &::before {
            content: "";
            position: absolute;
            left: 40px;
            bottom: -1px;
            width: 72px;
            height: 2px;
            background: $xtxColor;
          }
        }
      }
    }
  }
  </style>